import React,  {Component} from 'react';
// import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
import { Table, Input, InputNumber, Popconfirm, Form ,Select,Button, Row, Col} from 'antd';
import ReactDOM from 'react-dom';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; //引入面包屑

import { connect } from 'dva';


import styles from './flooline.less'
import Flootab from '@/components/FloolineTab/flootab'



@connect(({ flooline, loading }) => ({  //连接home.js文件
    flooline,
    loading:loading.models.flooline
  }))


class FlooLine extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        dataList: [],
        isShow:true,
        isNone:'none',
        floodata:[],
        childrendata:[],
        selectValue:'',
        addname:'',
        iframeselect:''
      
      };
    }
 
    componentWillReceiveProps(nextProps){
        // console.log(nextProps)
        // if(flooline)
        const {flooline } = nextProps;
        if(flooline.list.length=='0'){
            return
        }else{
            this.setState({
            floodata:flooline.list.result.result_list,
            // childrendata:flooline.selectdata.result.result_list
        })
        }
     if( flooline.selectdata.length=='0'){
        return
     }else{
        this.setState({
            // floodata:flooline.list.result.result_list,
            childrendata:flooline.selectdata.result.result_list
        
        })
        console.log(this.state.childrendata)
     }
      }
        componentDidMount () {
            var obj={
                page_no:1,
                page_size:10,
                application_id:''
            }
            const { dispatch } = this.props;
            dispatch({
              type: 'flooline/fetchList',  //action的类型，由home命名空间和其下面的fetch方法构成
              payload: {
                ...obj,
              },
            });                    //派发这个action就会调用home中的fetch函数，然后就会请求数据
            // const { flooline: { list} } = this.props ;  
            // const ce = [...list];
            // console.log( ce)
            var selectData={
                page_no:1,
                page_size:0,
               
            }
            dispatch({

                type: 'flooline/fetchListselect',  //action的类型，由home命名空间和其下面的fetch方法构成
                payload: {
                  ...selectData,
                },
              });     



        }
       
     
    //  设置iframe的高  
    changeHeight(){
        var ifm=document.getElementById("ifm")
        console.log(ifm.height)
        ifm.height=window.innerHeight+127+"px";
        console.log(ifm.height)
        
        // alert(window.innerHeight)
    }
   
     


    // 得到下拉框的选中值
    getSelect =(valuel) =>{
        this.setState({
            selectValue:valuel
        })

        // console.log(valuel)

       };

       //点击搜索按钮

       finddata(){
              if(this.state.selectValue=="0"){
                  var findobj={
                      page_no:1,
                      page_size:0,
                      application_id:''
                  }
                const { dispatch } = this.props;
                dispatch({
                  type: 'flooline/fetchList',  //action的类型，由home命名空间和其下面的fetch方法构成
                  payload: {
                    ...findobj
                  },
                });        

              
              }else{

                var findobj={
                    page_no:1,
                    page_size:0,
                    application_id:this.state.selectValue
                }
                console.log( findobj)
              const { dispatch } = this.props;
              dispatch({
                type: 'flooline/fetchList',  //action的类型，由home命名空间和其下面的fetch方法构成
                payload: {
                  ...findobj
                },
              });        

                
              }



       }

    //点击iframe流程图页面的时候的下拉框的事件；
    addselect(val){
        // alert(val)
        this.setState({
            iframeselect:val
        })


    }
    //输入框内容改变时
    changname(e){
      this.setState({
        addname:e.target.value
      })
    }
    //    点击添加按钮事件
    addmsg(){
      
           this.setState({
            isShow:false,
            isNone:'block'
           })
       }


       //点击提交按钮
       adddata(){
           var addobj={
            name:this.state.addname,
            application_id:this.state.iframeselect,
            flow_data:"待定未取"  //从本地去
           }
             //点击添加按钮进行请求
        const { dispatch } = this.props;
        dispatch({
            type: 'flooline/createflow',  
            payload: {
              ...addobj
            },
          });     


           console.log(addobj)
       }
    render(){
        // const [id,name,age] = getParams(this.props.user)  || [0,'',0]
        //将ceshi中的this.props.list命名为list 
       
        

         //下拉框的配置和数据
         const Option = Select.Option;
         const children = [];
          for (var  i in this.state.childrendata) {
            children.push(<Option key={this.state.childrendata[i].application_id.toString() }>{this.state.childrendata[i].name}</Option>);
          }
        return( 
            <PageHeaderWrapper title=' '>  
            {/* iframe的头部一开始是隐藏的 */}
            <div>
            <div style={{display:this.state.isNone}} >
           
                <Row type="flex">
                    <Col span={6} order={4}>
                       <Button  className={styles.addmsg}  onClick={this.adddata.bind(this)}  type="primary">提交</Button>
                    </Col>
                    <Col span={6} order={3}> 
                       {/* <Button  className={styles.addmsg}   type="primary">搜索</Button> */}
                    </Col>
                    <Col span={6} order={2}>
                         <div className={styles.sel} >
                             <div>名称：</div>
                             <div style={{width:150}} >
                                 <Input size="default" onChange={this.changname.bind(this)} placeholder="请输入名称" />
                             </div>
                         </div>
                    </Col>
                    <Col span={6} order={1}>
                        <div className={styles.sel}>
                        <div>所属产品：</div>
                        <Select defaultValue="全部"  onChange={this.addselect.bind(this)} style={{ width: 150 }} >
                        <Option key="0">全部</Option>
                            {children}
                        </Select>
                        </div>
                    
                    </Col>
                </Row>
            </div>
            
            {/* <div > */}
            { this.state.isShow?
            <div>
                {/* 展示的头部 */}
                 <div>
                        <Row type="flex">
                        <Col span={6} order={4}>
                            <Button  className={styles.addmsg}   type="primary"  onClick={this.addmsg.bind(this)} >添加</Button>
                        </Col>
                        <Col span={6} order={3}> 
                            <Button  className={styles.addmsg}  onClick={this.finddata.bind(this)}  type="primary">搜索</Button></Col>
                        <Col span={6} order={2}></Col>
                        <Col span={6} order={1}>
                            <div className={styles.sel}>
                            <div>
                                产品：
                            </div>
                            <Select defaultValue="全部"  onChange={this.getSelect.bind(this)} style={{ width: 200 }} >
                            <Option key="0">全部</Option>
                                {children}
                            </Select>
                            </div>
                        
                        </Col>
                        </Row>
                </div>
                <div className={styles.line}>
                     {/* 为了撑开行高 好看的 */}
                </div>
               <Flootab 
                  floodata={this.state.floodata}
               />>
            </div>:
            <div className={styles.box} >
       {/* iframe嵌入的页面 */}
            <iframe 
            src="http://127.0.0.1:8848/GooFlow-1.3.10-20181122/examples/demo_ide.html"
            id="ifm"
            onLoad={this.changeHeight.bind(this)}
            width="100%" 
            height="100%"
            frameBorder="no"
            scrolling="yes"
            >
            </iframe>
            </div>
             }
            </div>
            </PageHeaderWrapper>
        );
    }
}
export default FlooLine;